<template>
  <div id="big">
    <!-- 搜索框 -->
    <!-- 分类页 -->
    <van-search
      v-model="value"
      shape="round"
      background="#fff"
      placeholder="请输入搜索关键词"
      disabled
      @click="showpop"
    />
    <div class="box">
      <div class="box-l">
        <van-sidebar v-model="activeKey" sidebar-selected-background-color="#F7F8FA" >
          <van-sidebar-item v-for="(item,index) in List" :key="index" :title="item.name" @click="change(item.id)" class="van"/>
          <!-- @click="ShowList()" -->
        </van-sidebar>
      </div>
      <!-- 此处会有对应的不同的页面使用组件完成 引入这个子组件 -->
      <div class="box-r">
        <classify-list :list="List2"></classify-list>
      </div>
  </div>
    <transition name="van-slide-right">
      <router-view></router-view>
    </transition>
  </div>
</template>

<script>
  //引入请求数据
import { GetClassify,GetCurrent } from "../request/api.js";
 //引入个子组件 
 import ClassifyList from "../components/Classify/list.vue"
export default {
  data() {
    return {
      value: "",
      activeKey: 0,
      List:[],
      List2:[],
    };
  },
  methods: {
    //分类页面的搜索框
    showpop() {
      this.$router.push("/classify/popup");
    },
    change(id){
      //这个是请求当前所在的id对应的数据
      GetCurrent({id:id})
      .then(res=>{
          //  console.log(res);
           this.List2=res.data.currentCategory
      })
      .catch(err=>{

      })
    }
  },
  created() {
     //请求的数据
    GetClassify()
      .then((res) => {
        // console.log(res);
         this.List=res.data.categoryList
         this.List2=res.data.currentCategory

      })
      .catch((err) => {
        console.log(err);
      });
  },
  components:{
    ClassifyList
  }
  
};
</script>

<style lang="less" scoped>
  #big{
     background-color: #fff;
     width: 100%;
     height: 100%;
  }
  .box{
    display: flex;
    background-color: #e4e2e2;
    height: 100%;
    .box-l{
      width: 20%;
    }
    .box-r{
      width: 80%;
    }
  }
  .van{
    height: 0.64rem;
  }
</style>